<template>
  <div class="product-card-images">
    <div v-for="item in Object.values(props.data)" class="product-card-images-item">
      <div v-if="!!item.color" class="product-card-images-item--color">
        <el-image :src="item.color_image">
          <template #error>
            <span></span>
          </template>
        </el-image>
        <span>{{ item.color }}</span>
      </div>
      <div class="product-card-images-item--views">
        <el-image
          v-for="(view, index) in [...(item.list ?? [])]"
          fit="cover"
          :src="`${view.file_url}_100x100.jpg`"
          @click="handleLook(item.list, index)"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElImage } from "element-plus";

import { api as viewerApi } from "v-viewer";

import DefaultImage from "@/assets/images/goods_img.webp";

const props = defineProps<{
  // 初始化请求队列 id
  queueId?: string;
  // 表单项动态列数
  span: number;
  // 编辑状态
  editor: boolean;
  // 回显数据
  data: Record<string | number, any>;
}>();

const handleLook = (images: Array<Record<string, any>>, index: number) => {
  viewerApi({
    images: [...(images ?? [])],
    options: {
      toolbar: true,
      url: "file_url",
      fullscreen: false,
      initialViewIndex: index
    }
  });
};
</script>

<style scoped lang="scss">
.product-card-images {
  &-item {
    display: flex;
    border: 1px dashed var(--merak-border-color);
    border-radius: var(--merak-rounded);
    &:not(:first-child) {
      margin-top: var(--merak-space);
    }
    &--color {
      display: flex;
      align-items: center;
      padding: var(--merak-padding);
      min-width: 0;
      width: 148px;
      background-color: #f8f9fa;
      & > .el-image {
        width: 20px;
        height: 20px;
      }
      & > span {
        margin-left: var(--merak-space);
        font-size: 15px;
      }
    }
    &--views {
      display: flex;
      flex-wrap: wrap;
      padding: var(--merak-padding);
      margin-right: calc(0px - var(--merak-padding));
      margin-bottom: calc(0px - var(--merak-padding));
      .el-image {
        margin-right: var(--merak-padding);
        margin-bottom: var(--merak-padding);
        width: 100px;
        height: 100px;
        cursor: pointer;
      }
    }
  }
}
</style>
